<template>
  <div id="ColOffline">
    <!--主内容区-->
    <el-space fill wrap :size="5" fill-ratio="90" direction="vertical" style="margin: auto auto 10px;width: 100%">
      <el-card v-for="(m) in messages" shadow="hover">
        <div style="display:flex;justify-content: space-between;align-items: center">
          <div style="float: left">{{ m.content }}</div>
          <div style="float: right; padding: 3px 0;text-align: right;color: #999">
            <div style="font-size: 17px">{{ m.name }}</div>
            <div style="font-size: 8px;font-style:oblique;">{{ m.role }}</div>
          </div>
        </div>
          
      </el-card>
    </el-space>

    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[1, 3, 5, 10]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="justify-content: center;"
    />
  </div>
</template>

<script>

import axios from "axios";

export default {
  name: "ColOffline",
  data() {
    return {
      messages:{},
      currentPage: 1,
      pageSize: 5,
      total: 10,
      small: false,
      background: true,
      disabled: false,
    }
  },
  methods:{
    handleSizeChange(val) {
      axios.post('/project/message', {
        page: this.currentPage,
        pageSize: val,
      }).then(res => {
        let r = res.data
        this.total = r.total
        this.messages = r.datas
      }).catch(err => {
        console.log(err)
      })
    },
    handleCurrentChange(val) {
      axios.post('/project/message', {
        page: val,
        pageSize: this.pageSize
      }).then(res => {
        let r = res.data
        this.total = r.total
        this.messages = r.datas
      }).catch(err => {
        console.log(err)
      })
    },
  },
  mounted() {
    this.handleCurrentChange(1)
  },
}
</script>

<style scoped>

</style>
